<template>
  <div style="margin-left: 20px;">
      <div class="picker" style="margin-top: 20px;">


          <div >
              <el-date-picker
          @change="getpicker"
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          >
          
        </el-date-picker>
          </div>
         

      </div>
<div class="line_chart">
<div id="container1"   >
</div>


</div>
</div>
<div  class="tabname_two"><h1>销售统计报表</h1>
<!-- <button class="btn">导出</button> -->
</div>
<!-- //==============================================导出以下table表格 -->
<div class="box2">
<div class="inp">
<el-form 

 :inline="true"
 :model="formInline" 
label-position="top"
style="display: flex; align-items: center;
 justify-content: space-between;
 background-image: linear-gradient(to left, rgba(205, 205, 205, 0.109), transparent), linear-gradient(to right, rgba(205, 205, 205, 0.089), transparent);
 border-radius: 40px;
"
>
  
 
  <el-form-item label="归属渠道">
  <el-select v-model="formInline.saleChannel" clearable placeholder="请选择渠道" style="width: 100%">
    <el-option
    v-for="item in options"
    :key="item.saleChannel"
    :label="item.saleChannel"
    :value="item.saleChannel"
  />
  </el-select>

</el-form-item>

<el-form-item  label="&nbsp"  >
<el-button type="primary" round  @click="onSubmit">搜索</el-button>
<el-button type="info" round  @click="btnResetform">重置</el-button>
</el-form-item>


</el-form>
</div>

<!-- ===================================================table -->
<el-table :data="customerTable" stripe>
<el-table-column
    type="selection"
    width="55">
  </el-table-column>
<el-table-column
    prop="id"
    type="index"
    width="300"
    label="排行"
    align="center"
 >
  </el-table-column>
<el-table-column
    prop="saleChannel"
    label="归属渠道"
 >

  </el-table-column>
<el-table-column
    prop="contractAmount"
    label="合同数量"
    align="center"
 >
  </el-table-column>
<el-table-column
    prop=total
    label="成交金额"
    align="center"
 >
  </el-table-column>


 
</el-table>
<div class="block" >
<!-- //            ====分页======= -->
<el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage4"
    :page-sizes="[100, 200, 300, 400]"
    :page-size="100"
    layout="total, sizes, prev, pager, next, jumper"
    :total="queryParams.total">
  </el-pagination>
</div>

</div>

     

</template>

<script setup>//=====================================================script===========================

// import Piecontainer_two from './Piecontainer_two.js'
import {ref,onMounted , } from "vue";
import dayjs from "dayjs";
// import { registerAnimation, AnimationType } from '@antv/g2';
// import { pathIn } from '@antv/g2/lib/animation/detail/path-in';
// registerAnimation(AnimationType.Appear, 'path-in', pathIn);

import { Line } from '@antv/g2plot';//导入饼图
const updatepicker=ref({
  "beginCreateTime":'2022-06-12',
  "endCreateTime":'2023-06-16',

})                           //用来搜索的时间值
const value1=ref('')
const data=ref([])
// const activeIndex=ref(0)
const customerTable=ref([])//渲染table的数据
const formInline=ref({
belonger:'',//归属人
belongDept:"",//所属归属部门
sourceChannel:''//所属渠道
})
const queryParams=ref({
"page": 1,
"size": 10,
"condition": "",
total:''
})
const options =ref([ {
  value: '线上活动id',
  label: 'sourceChannel线上活动id',
},
{
  value: '学习部门id',
  label: 'departmentAffiliation学习部门id',
},
])
import { getSaleslist,getchannel,getdepartment,getascription } from "@/api/count.js";

const getpicker=(val)=>{
  // console.log(val);
  // console.log(val[0])
  // console.log(val[1])
updatepicker.value.beginTime= dayjs(val[0]).format('YYYY-MM-DD')
updatepicker.value.endTime= dayjs(val[1]).format('YYYY-MM-DD ')
console.log('时间框里面的值',updatepicker.value);
  // 更新图表数据
  getSaleslistAPI();
}

// ================================  折线数据

//   //饼图数据



//折线
const renderLineChart=()=>{
  const data =
  [
  { "year": "2023-6-2", "value": 10000 },
  { "year": "2023-6-3", "value": 30000 },
  { "year": "2023-6-4", "value": 20000 },
  { "year": "2023-6-5", "value": 10000 },
  { "year": "2023-6-6", "value": 70000 },
  { "year": "2023-6-7", "value": 80000 },
  { "year": "2023-6-8", "value": 30000 },
  { "year": "2023-6-9", "value": 510000 },
  { "year": "2023-6-10", "value": 10000 },
  { "year": "2023-6-11", "value": 130000 },
  { "year": "2023-6-12", "value": 230000 },
  { "year": "2023-6-13", "value": 550000 },
  { "year": "2023-6-14", "value": 22000 },
  { "year": "2023-6-15", "value": 35000 },
  { "year": "2023-6-16", "value": 18000 },
  { "year": "2023-6-17", "value": 40000 },
  { "year": "2023-6-18", "value": 27000 },
  { "year": "2023-6-19", "value": 60000 }
]
    // const containerSelector = showContainer.value ? '#container' : '#container1'; // 根据showContainer的值选择容器元素选择器
    const container = document.getElementById('container1');
    const line = new Line(container, {
      description:{
visible:true,
text:'单位: 元'
      },
      title:{
        visible:true,
text:'33333333333'
      },
      data, // 使用数据的响应式引用
  xField: 'year',
  yField: 'value',
  // label: {},
  point: {
    size: 2,
   color:'red',
   shape: 'circle',
   type: 'circle',
   stroke: 'none', // 不要描边
   
    style: {
      fill: '#1890ff',
      stroke: '#5B8FF9',
      lineWidth: 2,
    },
  },
  tooltip: { showMarkers: true },
  state: {
    active: {
      style: {
        shadowBlur: 4,
        stroke: '#000',
        fill: 'red',
      },
    },
  },
  interactions: [{ type: 'marker-active' }],
  // animation: {
  //       appear: {
  //         animation: 'path-in',
  //         duration: 5000,
  //       },
  //     },
});

line.render();
}
//                                            table获取搜索数据
const getSaleslistAPI=async()=>{
const res= await getSaleslist({  beginTime:'2023-06-09', endTime:'2023-06-19',})
console.log('初始化图表数据',res);
  // 转换日期格式为 'YYYY-M-D'
// const formattedDates = res.dateLists.map(date => {
//   const [year, month, day] = date;
//   return `${year}-${month}-${day}`;
// });
// 创建包含年份和值的对象数组
// data.value = formattedDates.map((date, index) => ({
//   year: date,
//     value:res.salesList[index], 
  
// }));

console.log('渲染图标数据',data.value)

}
////////渠道table数据
const getchannelAPI=async()=>{
   const {data,total}=  await getchannel({
    ...queryParams.value,...updatepicker.value
   })
  //  console.log('销售数据',data);
   customerTable.value=data
   queryParams.value.total=total
const list=await getdepartment({
  ...queryParams.value,...updatepicker.value
})
console.log('部门',list);
options.value=data
// const list1=await getascription({
//   ...queryParams.value,...updatepicker.value
// })
// console.log(list1);
}

///重置按钮
const btnResetform=()=>{
formInline.value={
belonger:'',//归属人
departmentAffiliation:"",//所属部门
sourceChannel:''//所属渠道

}
}
// 搜索按钮
const onSubmit = async()=>{
  console.log('搜索框里面内容',formInline.value);
// const res = await getSaleslist(
// {...queryParams.value,...formInline.value}
//   )
//   customerTable.value=res.data
}
onMounted(()=>{
  getSaleslistAPI()//获取图表搜索数据
  getchannelAPI()//table获取搜索数据
renderLineChart()//折线
})

</script>
<style scoped lang="less">
.picker{
  display: flex;
  justify-content: space-between;
  .right_btn{
     width: 220px
     ;
     height: 40px;
     display: flex;
     justify-content: space-evenly;
      // margin-left: 70%;
      margin-right: 20px;
      border-radius: 5px;
      padding: 4px;
      border: 1px solid rgba(171, 168, 168, 0.052);
      background-color: #cdcdcd28;
      button{
        border: 1 solid red;
      }
      ul{
list-style-type: none;
display: flex;
padding-left: 0px;
margin-left: 2px;
li{
margin-top: -4px;
color: #aeb5c4;
font-size: 14px;
height: 32px;
border-radius: 6px;
padding: 0px 7px;
font-family: PingFangSC,PingFangSC-Semibold;
font-weight: 600;
display: flex;
width: 95px;
align-items: center;
justify-content: center;
text-align: center;
transition: all 0.2s ease-in-out;
}
      }
      .active{
        color: #05cc95;
        transition: all 0.5s ease-in-out;
        background-color: rgb(255, 255, 255);
        box-shadow: 0 6px 1px 0 rgba(0,0,0,.06);

      }
  }
}
.line_chart{
  margin-top: 20px;
  background-color: rgba(135, 207, 235, 0);
  width: 100%;
  height: 430px;
// #container2{
//   // width: 100%;
//   //   height: 430px;
//     // background-color: #78a721;
// }
}
.tabname_two{
    height: 80px;
    background-color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    .btn{
      background-color: rgb(253, 112, 100);
      border-radius: 40px;
      border: none;
      height: 40px;
      width: 100px;
      color: #ffffff;
      font-size: 17px;
      margin-right: 40px;
    }
  }
  .inp{
  background-color: #fff;
   margin-bottom: 10px;
    padding: 25px 56px 14px 17px;
h3,h5{
 
  font-weight: 300;
}
  }
  .block{
    display: flex;
    justify-content: center;
    padding: 2px 5px;
    margin-top:24px;
  }
  #container_two{
    width: 100%;
    height: 350px;
  }
  #container{
    width: 100%;
    height: 350px;
  }
</style>
<!-- //销售 -->